<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="rLine" style="width: 100%;height:320px;margin-top: 10px;"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'RightTable-1',
  data() {
    return {}
  },
  mounted() {
    this.showData()
  },
  methods: {
    showData() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('rLine'), 'dark')
      let option
      // 指定图表的配置项和数据
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          top: 0,
          itemHeight: 8, // 修改icon图形大小
          itemWidth: 8, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 12,
            padding: [0, 0, 0, 4] // 修改文字和图标距离
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['教育文化和娱乐', '医疗保健', '居住', '交通通信', '生活用品及服务', '食品', '衣着', '其他用品及服务']
        },
        series: [
          {
            name: '2022-10',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },

            emphasis: {
              focus: 'series'
            },
            data: [101.5, 106, 102.2, 108.4, 99.1, 102, 105.2, 110]
          },
          {
            name: '2022-11',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [111.3, 107.1, 108.4, 101.2, 103.5, 108.2, 96.3, 104.5]
          },
          {
            name: '2022-12',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [101.1, 101.4, 101.2, 101.3, 101.5, 101.2, 101.5, 98.5]
          },
          {
            name: '2023-01',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [101.7, 101.4, 101.2, 101.4, 101.1, 101.3, 101.5, 105]
          },
          {
            name: '2023-02',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [101.9, 104, 101.6, 101.2, 101.7, 105, 101.7, 107]
          },
          {
            name: '2023-03',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [101.6, 102, 101.9, 101.7, 101.5, 101.6, 101.4, 98]
          },
          {
            name: '2023-04',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [101.3, 101.5, 101.2, 101.6, 101.1, 101.7, 101.9, 103]
          },
          {
            name: '2023-05',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: [101.3, 101.5, 101.2, 101.6, 101.1, 101.7, 101.9, 98]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss"></style>
